<template>
  <h1>{{ objList }}</h1>
  <h1>{{ obj }}</h1>
  <button @click="changeList">修改集合</button>
  <button @click="changeObj">修改对象</button>
  <p>{{ name + gender }}</p>
  <p>{{ age }}</p>
</template>


<script lang="ts" setup name="ReactiveInfo">
import { reactive, toRefs, toRef } from 'vue'

// 定义的数据都是响应式的
let objList = reactive([
  { id: 'ahsgdyfa01', name: '英雄联盟' },
  { id: 'ahsgdyfa02', name: '王者荣耀' },
  { id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({
  a: {
    b: {
      c: {
        d: 666
      }
    }
  }
})
function changeList() {
  objList[0].name = "lol"
}
function changeObj() {
  obj.a.b.c.d = 999
}

let person = reactive({ name: '张三', age: 18, gender: '男' })
// 提取对象中所有属性具有响应式
let { name, gender } = toRefs(person)
// 提取对象中指定属性具有响应式
let age = toRef(person, "age")

</script>


<style scoped>
/* @import url(); 引入公共css类 */
</style>